<template>
  <div id="pageWindow" class="my-coupon">
    <header>
      <img :src="picList[0]" class="max-width banners">
    </header>
    <div class="tab">
      <div class="tab-menu">
        <div class="width_right" :class="{'active':defaultList==2}" @click="switchTab(2)">平台优惠券</div>
        <div class="width_left" :class="{'active':defaultList==1}" @click="switchTab(1)">专区优惠券</div>
      </div>
      <!-- 专区券 -->
      <div v-if="defaultList==1">
        <div class="coupon-list" v-for="(item,index) in coponListSpecial" :key="index" @click="getTickets()">
          <img :src="picList[6]" class="max-width banners">
          <div class="left">
            <p style="font-size:0.32rem;">{{item.coupon_name}}</p>
            <p style="font-size:0.20rem;">{{item.start_time}}--{{item.end_time}}</p>
          </div>
          <div class="right">
            <p style="font-size: 0.6rem;padding: 0.1rem 0 0 0.3rem;">{{parseInt(item.discount)}}</p>
            <p>满{{parseInt(item.amount)}}使用</p>
          </div>
        </div>
      </div>
      <!-- 平台券 -->
      <div v-else>
        <div class="coupon-list" v-for="(item,index) in coponListPlatform" :key="index">
          <img :src="picList[6]" class="max-width banners">
          <div class="left">
            <p style="font-size:0.32rem;">{{item.coupon_name}}</p>
            <p style="font-size:0.20rem;">{{item.start_time}}--{{item.end_time}}</p>
          </div>
          <div class="right">
            <p style="font-size: 0.6rem;padding: 0.1rem 0 0 0.3rem;">{{parseInt(item.discount)}}</p>
            <p>满{{parseInt(item.amount)}}使用</p>
          </div>
        </div>
      </div>
    </div>
    <div class="special">
      <img :src="picList[2]" class="max-width banners">
      <div class="width_33_1" onclick="jump2special(62143)"></div>
      <div class="width_33_2" onclick="jump2special(62145)"></div>
      <div class="width_33_3" onclick="jump2special(62349)"></div>
    </div>
    <div class="special">
      <img :src="picList[3]" class="max-width banners">
      <div class="width_33_1" onclick="jump2special(62207)"></div>
      <div class="width_33_2" onclick="jump2special(62059)"></div>
      <div class="width_33_3" onclick="jump2special(62057)"></div>
    </div>
    <div class="special">
      <img :src="picList[4]" class="max-width banners">
      <div class="width_33_1" onclick="jump2special(61835)"></div>
      <div class="width_33_2" onclick="jump2special(61867)"></div>
      <div class="width_33_3" onclick="jump2special(61499)"></div>
    </div>
    <div class="abbdon"></div>
    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <div class="width_25_1" @click="activitySwitch(0)"></div>
      <div class="width_25_2" @click="activitySwitch(1)"></div>
      <div class="width_25_3" @click="activitySwitch(2)"></div>
      <div class="width_25_4" @click="activitySwitch(3)"></div>
      <img :src="picList[5]" alt>
    </div>
    <!-- 加载动画 -->
    <div class="loading_box">
      <div class="load">
        <div class="circle2"></div>
        <p>闪</p>
      </div>
    </div>
    <!--返回顶部-->
    <span id="return-top">
      <img src="https://mstatic.shandjj.com/default/common/common-images/list_numb_press1@2x.png">
    </span>
  </div>
</template>
<script>
import { backTop } from "assets/js/sdjjPublic.js";
import { resetAddress } from "@/utils/utils.js";
import BaseUrl from "@/utils/ajaxRequest.js";
export default {
  name: "superSeckill",
  data() {
    return {
      userId: "",
      setLinkString: "", //图片的基本地址
      pageName: "myCoupon", //图片分类的名称
      defaultList: 2,//默认平台券
      coponListSpecial: [], //专区
      coponListPlatform: [], //平台
      picList: []
    };
  },
  created() {
    this.userId = window.person.user_id;
    this.formatImgLink();
    this.getCoupon();
  },
  mounted() {
    backTop("return-top");
  },
  methods: {
    switchTab(val) {
      this.defaultList = val;
    },
    //会场跳转
    activitySwitch(val) {
      switch (val) {
        case 0:
          jump2url(`${window.location.origin}/TaoAction/index`);
          break;
        case 1:
          jump2url(`${window.location.origin}/TaoAction/newSeason`);
          break;
        case 2:
          jump2url(`${window.location.origin}/TaoAction/clothesSub`);
          break;
        case 3:
          jump2url(`${window.location.origin}/TaoAction/myCoupon3`);
          break;
        default:
          jump2url(`${window.location.origin}/TaoAction/index`);
      }
    },
    getCoupon() {
      var _this = this;
      var ajaxt = '?t=' + new Date().getTime();
      $.get({
        url: `${BaseUrl}/index.php/Coupon/ajAllGetCoupon`+ajaxt,
        async: true,
        dataType: "json",
        data: { user_id: this.userId },
        success: function(res) {
          if (res.code == 200 && res.status == "success") {
            _this.coponListSpecial = res.data.special;
            _this.coponListPlatform = res.data.platform;
          }
        }
      });
    },
    //处理静态资源地址
    formatImgLink() {
      var tempLink =
        window.location.hostname == "activity.shandjj.com"
        ? "http://mstatic.shandjj.com/"
        : "http://mstatic.sdjjia.com/";
      this.setLinkString = `${tempLink}/default/ActiveImg/celebration/img/`;
      var setLinkString = this.setLinkString;
      this.picList = [
        this.setLinkString + "pic70001.jpg",
        this.setLinkString + "pic70002.jpg",
        this.setLinkString + "pic70003.jpg",
        this.setLinkString + "pic70004.jpg",
        this.setLinkString + "pic70005.jpg",
        this.setLinkString + "bottom-btn.png",
        this.setLinkString + "coupon_bg.jpg"
      ];
    }
  }
};
</script>

<style lang="less" >
html,
body {
  background: #7a0000;
}
.my-coupon {
  width: 100%;
  position: relative;
}
.abbdon {
  padding-bottom: 1.7rem;
}
#share {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0.15rem 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.2rem;
  box-sizing: content-box;
}
.tab {
  width: 100%;
  position: relative;
  background: url("../../../assets/images/celebration/clothesSub/pic70002.jpg")
    repeat-y top left;
  background-size: contain;
}

.tab .tab-menu {
  width: 100%;
  height: 0.5rem;
  padding: 0 0.2rem;
}

.tab .tab-menu div {
  float: left;
  width: 3.3rem;
  margin: 0 0.1rem;
  font-size: 0.3rem;
  background: #f61324;
  text-align: center;
  color: #fee0a8;
}
.tab > div .active {
  color: #b80411;
  background: #fee0a8;
}
.special {
  position: relative;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  img {
    vertical-align: bottom;
  }
}
.coupon-list {
  width: 100%;
  position: relative;
  .left {
    width: 3.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.2rem;
    left: 1.1rem;
    padding-top: 0.1rem;
    color: #a6937c;
    font-size: 0.28rem;
    line-height: 0.5rem;
    background: #fff;
    text-align: center;
  }
  .right {
    width: 1.9rem;
    height: 1.2rem;
    position: absolute;
    top: 0.2rem;
    left: 4.4rem;
    padding-top: 0.1rem;
    color: #fff;
    font-size: 0.28rem;
    line-height: 0.5rem;
    text-align: center;
  }
}
#return-top {
  bottom: 15%;
}
</style>